import React, { useState } from "react";
import style from '../css/welfare.module.scss'
import { Link } from "react-router-dom";

export default function SignUpProcess() {
    let [flag1, setFlag1] = useState('none'),
        [flag3, setFlag3] = useState('block'),
        [flag2, setFlag2] = useState(true)
    const show = (n1) => {
        setFlag2(!flag2)
        if (n1 == true) {
            setFlag1('block')
            setFlag3('none')
        } else {
            setFlag1('none')
            setFlag3('block')
        }
    }
    return (
        <div className={style.wapper_content}>
            <div className={style.item_title}>
                <p>签约流程</p>
                <span className={style.item_title4_border}></span>
            </div>
            <div className={style.about_item_content}>
                <p className={style.default_text}>
                    <b style={{ fontSize: '18px' }}>如何成为酷匠作家</b>
                </p>
                <p className={style.default_text}>
                    1.
                    <Link to='/bookRelease' style={{ color: 'orange' }}>注册成为作者</Link>
                    ——创建作品——发布内容——到达两万字——申请签约——编辑审核——静待审核结果——过审签署合同
                </p>
                <div className={style.step_wrapper} style={{ display: flag1 }}>
                    <p className={style.default_text}>
                        <b>第1步：点击网站上方导航栏进入作者专区后：点击马上投稿，注册</b>
                        <Link to='/bookRelease' style={{ color: 'orange' }}>成为作者</Link>
                        <img src="https://s.kjcdn.com/groundwork/images/welfare2022/step_1.png" alt="" />
                    </p>

                    <p className={style.default_text}>
                        <b>第2步：填写您的笔名并写入真实的联系电话</b>
                        <img src="https://s.kjcdn.com/groundwork/images/welfare2022/step_2.png" alt="" />
                    </p>

                    <p className={style.default_text}>
                        <b>第3步：创建作品</b>
                        <img src="https://s.kjcdn.com/groundwork/images/welfare2022/step_3.png" alt="" />
                    </p>

                    <p className={style.default_text}>
                        <b>第4步：发布章节内容，提交审核之后，等待审核人员审核</b>
                        <img src="https://s.kjcdn.com/groundwork/images/welfare2022/step_4.png" alt="" />
                    </p>

                    <p className={style.default_text}>
                        <b>第5步：章节审核通过达到2万字,即可申请签约 。申请签约之后等待编辑审核</b>
                        <img src="https://s.kjcdn.com/groundwork/images/welfare2022/step_5.png" alt="" />
                    </p>

                </div>
                <p className={style.default_text_open_wrapper} onClick={() => { show(flag2) }}>
                    <b style={{ display: flag3 }}>展开图文指南</b>
                    <img style={{ display: flag3 }} src="https://s.kjcdn.com/groundwork/images/welfare2022/down.png" alt=""/>

                    <b style={{ display: flag1 }}>收起图文指南</b>
                    <img style={{ display: flag1 }} src="https://s.kjcdn.com/groundwork/images/welfare2022/up.png" alt="" />
                </p>
                <p className={style.default_text}>2.添加编辑QQ——发送稿件——编辑审核——静待审核结果——过审签约</p>
                <p className={style.default_text}>3.注册发书——签署合同/ 手机用户：
                    可以在各大手机应用商店搜索并下载“酷匠阅读”APP，登录APP后，依次点击“我的-作者专区”，即可在APP内创建并管理您的作品，签约成功即送精品封面一份 </p>
            </div>
        </div>
    )
}
